<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js"></script>

		<style>
			.mat10{
				margin-top: 10px;
			}
			
			.mal20{
				margin-left: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<student :ref="'stu'+index" :key="index" v-for="(item,index) in stuList" :intro="item"></student>
			<button class="mat10" @click="getRefs">获取ref</button>
			<button class="mat10 mal20" @click="setScore">修改张三的分数</button>
		</div>
		<script type="text/javascript">
			var vConsole = new VConsole();
			//定义组件
			Vue.component('student', {
				template: '<div>姓名：{{intro.name}}，年龄：{{intro.age}}，分数：{{score}}，</div>',
				props: {
					intro: Object //基本信息
				},
				data() {
					return {
						score: "" //分数
					}
				},
				// data: {
				// 	score: "" //分数
				// },
				created: function() {
					// 随机给学生生成一个分数
					this.score = Math.floor(Math.random() * 101);
				},
				methods: {
					setScore(value) {
						this.score = value;
						console.log("修改分数===", this.score);
					}
				}
			})
			// 创建实例
			var app = new Vue({
				el: '#app',
				data() {
					return {
						stuList: [{
								name: '张三',
								age: 17
							},
							{
								name: '李四',
								age: 18
							}, {
								name: '王五',
								age: 19
							}
						]
					}
				},
				computed: {},
				methods: {
					getRefs() {
						console.log(this.$refs);
					},
					setScore() {
						//修改学生分数
						this.$refs.stu0[0].setScore(88);
					}
				}
			});
		</script>
	</body>
</html>
